<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
    .inrange, .outofrange {
        background-color: red
    }
    input:in-range + .inrange, input:out-of-range + .outofrange {
        background-color: green
    }
</style>
<div>
    <input type="number" min="1" max="10" value="20" id="t1">
    <span id="r1" class="inrange">This text should have a green background</span>
</div>
<div>
    <input type="number" min="1" max="10" value="5" id="t2">
    <span id="r2" class="outofrange">This text should have a green background</span>
</div>
<div>
    <input type="number" min="1" max="10" value="20" id="t3">
    <span id="r3" class="inrange">This text should have a green background</span>
</div>
<div>
    <input type="number" min="1" max="10" value="5" id="t4">
    <span id="r4" class="outofrange">This text should have a green background</span>
</div>
<div>
    <input type="number" min="1" max="10" value="20" id="t5">
    <span id="r5" class="inrange">This text should have a green background</span>
</div>
<div>
    <input type="number" min="1" max="10" value="5" id="t6">
    <span id="r6" class="outofrange">This text should have a green background</span>
</div>
<div>
    <input type="number" min="1" max="10" value="20" id="t7">
    <span id="r7" class="inrange">This text should have a green background</span>
</div>
<div>
    <input type="number" min="1" max="10" value="5" id="t8">
    <span id="r8" class="outofrange">This text should have a green background</span>
</div>
<script>
    test(() => {
        assert_equals(getComputedStyle(r1).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
        t1.value = "5";
        assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied.");
    }, "Change an out-of-range number input value to be in-range through DOM property.");

    test(() => {
        assert_equals(getComputedStyle(r2).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
        t2.value = "20";
        assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied.");
    }, "Change an in-range number input value to be out-of-range through DOM property.");

    test(() => {
        assert_true(!!window.eventSender, "Needs window.eventSender to test keyboard input.")
        assert_equals(getComputedStyle(r3).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
        t3.focus();
        t3.select();
        eventSender.keyDown("5");
        assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied.");
    }, "Change an out-of-range number input value to be in-range with keyboard input.");

    test(() => {
        assert_true(!!window.eventSender, "Needs window.eventSender to test keyboard input.")
        assert_equals(getComputedStyle(r4).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
        t4.focus();
        t4.select();
        eventSender.keyDown("2");
        eventSender.keyDown("0");
        assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied.");
    }, "Change an in-range number input value to be out-of-range with keyboard input.");

    test(() => {
        assert_equals(getComputedStyle(r5).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
        t5.setAttribute("value", "5");
        assert_equals(getComputedStyle(r5).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied.");
    }, "Change an out-of-range number input value to be in-range with setAttribute.");

    test(() => {
        assert_equals(getComputedStyle(r6).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
        t6.setAttribute("value", "20");
        assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied.");
    }, "Change an in-range number input value to be out-of-range with setAttribute.");

    test(() => {
        assert_equals(getComputedStyle(r7).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
        t7.setAttribute("max", "40");
        assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied.");
    }, "Change an out-of-range number input value to be in-range by changing max attribute.");

    test(() => {
        assert_equals(getComputedStyle(r8).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
        t8.setAttribute("min", "10");
        assert_equals(getComputedStyle(r8).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied.");
    }, "Change an in-range number input value to be out-of-range by changing min attribute.");

</script>
